<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕设课题智能管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>

<header>
    <div id="logo_box">
        <img src="../favicon.ico" alt=""/>
    </div>
    <div id="index_box">
        <a href="teacher.html">教师出题</a>
    </div>
    <div id="about_box">
        <a href="student.html">学生选题</a>
    </div>
    <div id="tel_box">
        <a href="admin.html">管理员页面</a>
    </div>
    <div id="login_box" style="display: block">
        <button id="loginBtn">登录</button>
    </div>
    <div id="reg_box" style="display: block">
        <button id="registerBtn">注册</button>
    </div>
    <div id="username_box" style="display: none">
        <p id="usernameInfo"></p>
    </div>
    <div id="user_avatar_box" style="display: none">
        <img id="userAvatar" src="" alt=""/>
    </div>
    <div id="logout_box" style="display: none">
        <button id="logoutBtn" onclick="logout()" onsubmit="return false;">登出</button>
    </div>
    <div id="identify_box" style="display: none">
        <button id="identify">认证中心</button>
    </div>
</header>

<div class="modal" id="loginModal" style="display: none">
    <button id="loginBackBtn" class="back-button">x</button>
    <form id="loginForm" method="post" onsubmit="return false;">
        <h2>用户登录</h2>
        <label for="usr">用户名/邮箱</label>
        <input id="usr" required>
        <label id="loginErr" hidden="hidden"></label>
        <br>
        <label for="pwd">密码</label>
        <input id="pwd" type="password" pattern=".{6,}" title="密码至少6位" required>
        <br>
        <button id="loginSubmit" onclick="login()" type="submit">登录</button>
        <br>
        <a href="#">没有账号？注册</a>
        <a href="#">找回密码</a>
    </form>
</div>

<div class="modal" id="registerModal" style="display: none">
    <button id="registerBackBtn" class="back-button">x</button>
    <form id="registerForm" method="post" onsubmit="return false;">
        <h2>用户注册</h2>
        <label for="usrReg">用户名</label>
        <input id="usrReg" required>
        <br>
        <label for="emailReg">邮箱</label>
        <input id="emailReg" required>
        <br>
        <label for="pwdReg">密码</label>
        <input id="pwdReg" type="password" pattern=".{6,}" title="密码至少6位" required>
        <br>
        <label for="codeReg">验证码</label>
        <input id="codeReg">
        <button onclick="sendSMSCode()" type="submit">发送验证码</button>
        <br>
        <label id="regErr" hidden="hidden"></label>
        <br>
        <button id="registerSubmit" onclick="registerByEmail()" type="submit">注册</button>
        <a href="#">已有账号？登录</a>
    </form>
    <br>
</div>

<!-- 轮播图 -->
<section id="carousel">
    <!-- 轮播图的每个幻灯片 -->
    <div class="slide active">
        <img src="../image/image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
        <img src="../image/image2.png" alt="Image 2">
    </div>
<!--    <div class="slide">-->
<!--        <img src="../image/image3.jpg" alt="Image 3">-->
<!--    </div>-->
    <!-- 控制按钮 -->
    <a class="prev" onclick="moveSlide(-1)">&#10094;</a>
    <a class="next" onclick="moveSlide(1)">&#10095;</a>
</section>

<!-- 学校最新动态 -->
<!-- 学校最新动态 -->
<section id="news">
    <h2>要闻</h2>
    <!-- 第一条新闻 -->
    <article>
        <div class="news-date">17 2023.12</div>
        <div class="news-content">
            <h3>上海海洋大学第六届“一带一路”海洋渔业高级培...</h3>
            <p>12月12日下午，上海海洋大学承办的上海市教委第六届“一带一路”海洋渔业高级培训项目在海洋科学学院闭幕...</p>
        </div>
    </article>
    <!-- 第二条新闻 -->
    <article>
        <div class="news-date">15 2023.12</div>
        <div class="news-content">
            <h3>上海海洋大学首批次“中国海域冷泉”载人深潜航...</h3>
            <p>上海海洋大学近日宣布，其首批次“中国海域冷泉”载人深潜航次已成功完成，标志着学校在深海研究领域取得重大进展...</p>
        </div>
    </article>
    <!-- 第三条新闻 -->
    <article>
        <div class="news-date">12 2023.12</div>
        <div class="news-content">
            <h3>罗非鱼遗传育种团队赴赞比亚大学举办第二期非洲...</h3>
            <p>罗非鱼遗传育种团队最近赴赞比亚大学，举办了第二期非洲罗非鱼育种技术培训，旨在推动当地水产养殖业的发展...</p>
        </div>
    </article>
</section>


<!-- 学术讲座 -->
<!-- 学术讲座 -->
<section id="lectures">
    <h2>学术讲座</h2>
    <!-- 第一场讲座 -->
    <article>
        <h3>科技前沿</h3>
        <p>许剑锋课题组在纳米抗体中和冠状病毒机制研究取...</p>
    </article>
    <!-- 第二场讲座 -->
    <article>
        <h3>上海海洋大学祖尧课题组在《CMLS》发表斑马鱼疾...</h3>
        <p>上海海洋大学祖尧课题组近日在国际著名期刊《CMLS》上发表了关于斑马鱼疾病机理的最新研究成果...</p>
    </article>
    <!-- 第三场讲座 -->
    <article>
        <h3>上海海洋大学教师在iScience发表罗非鱼生殖发育...</h3>
        <p>上海海洋大学的一位教师在国际学术期刊iScience上发表了关于罗非鱼生殖发育机制的研究，引起学术界关注...</p>
    </article>
</section>



<footer>
    <p>&copy; 2023 毕设课题智能管理系统 By TV90</p>
</footer>

<script>
    const loginBtn = document.getElementById('loginBtn');
    const registerBtn = document.getElementById('registerBtn');
    const loginModal = document.getElementById('loginModal');
    const registerModal = document.getElementById('registerModal');
    const loginBackBtn = document.getElementById('loginBackBtn');
    const registerBackBtn = document.getElementById('registerBackBtn');
    const identifyBtn = document.getElementById('identify');

    identifyBtn.addEventListener('click', () => {
        window.location.href = "identify.html";
    });

    loginBtn.addEventListener('click', () => {
        loginModal.style.display = 'block';
        registerModal.style.display = 'none';
    });

    registerBtn.addEventListener('click', () => {
        loginModal.style.display = 'none';
        registerModal.style.display = 'block';
    });

    loginBackBtn.addEventListener('click', () => {
        loginModal.style.display = 'none';
    })

    registerBackBtn.addEventListener('click', () => {
        registerModal.style.display = 'none';
    })

    let slideIndex = 1;
    showSlides(slideIndex);

    function moveSlide(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("slide");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {
            slideIndex = slides.length;
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex-1].style.display = "block";
    }


</script>

</body>
</html>

